@mixin element($name) {
    @at-root #{&}__#{$name} {
        @content;
    }
}

@mixin modifier($name) {
    @at-root #{&}-#{$name} {
        @content;
    }
}

.content {
    color: red;
    padding: 10px;
    @include element(header) {
        color: green;
        font-size: 13px;
        @include modifier(active) {
            color: blue;
        }
    }
    @include element(header) {
        color: green;
        font-size: 13px;
        @include modifier(active) {
            color: blue;
        }
    }
}